<?php
use yii\helpers\Url;
/* @var $this yii\web\View */

$this->title = '测试UI风格';
//这个变量在布局页脚处使用：本页面自定义引入的css与js
$this->params['pageJs'] = '<script src="'.Url::to('@web/js/ui-index.js').'"></script>';
$this->params['pageCss'] = '<link href="'.Url::to('@web/css/ui-index.css').'" rel="stylesheet">';
?>
<!--<link rel="stylesheet" href="../../web/element-ui-assets/index.css">-->
<!--<script src="../../web/element-ui-assets/index.js"></script>-->
<style>
    ul{padding: 0}
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .product_list_img{max-width: 87px;max-height: 87px}
    .product_img_box{
        height: 87px
        display: -webkit-flex; /* Safari */
        display: flex;
        /*框内子元素沿cross轴排列*/
        flex-direction: row;
        /*框内内容居中排列*/
        justify-content: center;
        align-items: center;
    }
    .product_info_box{
        display: -webkit-flex; /* Safari */
        display: flex;
        /*保持产品左框与右框固定为115px等高，结合flex布局，左框与右框从水平上看才能对齐*/
        height: 87px;
        /*框内子元素沿cross轴排列*/
        flex-direction: column;
        /*框内内容居中排列*/
        justify-content: center;
    }
    .product_title{
        color: #303133;
        font-size: 16px;
        font-weight: bolder;
        padding-top: 10px;
        text-align: left;
    }
    .product_comment{
        color: #909399;
        font-size: 12px;
    }
    .product_price{
        color: #F56C6C;
        font-size: 16px;
        font-weight: bold;
    }

    .transition-box {
        width: 100%;
        height: auto;
        border-radius: 4px;
        background-color: white;
        text-align: center;
        padding: 10px 20px;
        box-sizing: border-box;
        margin:0;
    }
    .footer{
        padding: 0;
        margin: 0;
        width: 100%;
        height: 53px;
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 99;
    }
    .mask{position:fixed;left:0;top:0;width: 100%;height: 100%;z-index: 98;background: grey;opacity:0.7;}
</style>
<div class="ui-index">
    <div id="app">
<?php for($i=0;$i<50;$i++){ ?>
        <el-row :gutter="5">
            <!--商品图片-->
            <el-col :span="8">
                <div class="grid-content product_img_box">
                    <img class="product_list_img" src="images/baozhi.jpg" alt="">
                </div>
            </el-col>
            <!--商品信息-->
            <el-col :span="16">
                <div class="grid-content product_info_box">
                    <!--商品名称及备注-->
                    <div>
                        <div class="product_title">肉包子</div>
                        <div class="product_comment">三个起售</div>
                    </div>
                    <!--商品价格与数量-->
                    <div style="display: flex;justify-content: space-between;line-height: 35px">
                        <!--商品价格-->
                        <div class="product_price"><span style="font-size: 12px">￥</span><span>1.00</span>元</div>
                        <!--加减按钮与数量-->
                        <div style="font-size: 20px;color: #409EFF">
                            <span class="el-icon-remove-outline"></span>
                            <a style="color: #606266;">1</a>
                            <span class="el-icon-circle-plus"></span>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
<?php } ?>
        <!--mask-->
        <template>
            <transition name="el-zoom-in-top">
                <div v-show="show2" class="mask">.el-zoom-in-bottom</div>
            </transition>
        </template>
        <!--页脚：结算操作-->
        <div class="footer">
            <!--弹出的购物车列表-->
            <div style="position: absolute;left: 0;bottom: 53px;width: 100%">
                <template>
                    <transition name="el-zoom-in-bottom">
                        <div v-show="show2" class="transition-box">
                            <ul>

<?php for($i=0;$i<5;$i++){ ?>

                                <li style="display: flex;flex-direction: row;justify-content: space-between;line-height: 50px;border-bottom: solid 1px #DCDFE6">
                                    <!--商品名称-->
                                    <div>肉包子</div>
                                    <!--加减按钮-->
                                    <div style="font-size: 20px;color: #409EFF;">
                                        <span class="el-icon-remove-outline"></span>
                                        <a style="color: #606266;">1</a>
                                        <span class="el-icon-circle-plus"></span>
                                    </div>
                                </li>

<?php } ?>

                            </ul>
                        </div>
                    </transition>
                </template>
            </div>
            <!--购物车按钮-->
            <div style="position: absolute;left: 12px;bottom: 12px;">
                <img @click="show2 = !show2" src="images/cart.png" alt="" style="width: 50px;height: 50px">
            </div>
            <!--页脚内容区-->
            <div style="display: flex;flex-direction: row">
                <!--价格合计-->
                <div style="width: 70%;height: 100%;padding-left:70px;padding-top:5px;display: flex;flex-direction: column">
                    <div class="product_price">￥</span><span>1.00</span></div>
                    <div class="product_comment">共<span>30</span>件</div>
                </div>
                <!--下单按钮-->
                <div style="width: 30%;height: 100%;line-height: 53px;background:#F56C6C;color: white;text-align: center ">
                    去下单
                </div>
            </div>
        </div>
    </div>
</div>
